<template>
    <div class="login">
        <el-form label-position="top" label-width="80px" :model="formdata" class="login-form">
            <h2>用户登录</h2>
            <el-form-item label="用户名">
                <el-input v-model="formdata.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="formdata.password"></el-input>
            </el-form-item>
            <el-button type="primary" class="login-btn" @click.prevent="Login">登录</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                formdata: {
                    username: 'admin',
                    password: 'admin',
                }
            };
        },
        methods:{
            Login(){
                if(this.formdata.username==''){
                    this.$message({
                        message: '用户名不能为空',
                        type: 'danger'
                    });
                    return;

                }else if(this.formdata.password==''){
                    this.$message({
                        message: '密码不能为空',
                        type: 'danger'
                    });
                    return;
                }
                if(this.formdata.username=='admin' && this.formdata.password=='admin'){
                    this.$router.push('/home');
                }else{
                    this.$message({
                        message: '用户名或密码错误',
                        type: 'danger'
                    });
                }
            }
        }
    }
</script>

<style scoped>
.login{
    height: 100%;
    background-color: #4682B4;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-form{
    width: 450px;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
}
.login-btn{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>